<template>
    <div class='dialog'>
        <div class='newAdd dialog-con brandINFo'>
            <div class="companynews">
                <h2>更新品牌信息</h2>
            </div>
            <div class="info">
                <div class="authbrand">
                    <div class="auth">
                        <label ><span>*</span>授权品牌</label>
                        <el-select v-model="addinfo.brandName" placeholder="请选择" disabled>
                            <el-option
                            v-for="item in brandList"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="auth">
                        <label > <span>*</span>品牌编码</label>
                        <el-input type="text" placeholder="请输入" v-model="addinfo.brandCode"></el-input>
                    </div>
                    <div class="auth">
                        <label > <span>*</span>授权级别</label>
                        <el-input type="text"  :value = "addinfo.accreditLevel | getLevel"  disabled></el-input>
                    </div>
                    <div class="block" style="margin:20px 0">
                        <label class="accreditStartTime"  style="color:#606266;width:120px;display:inline-block"><span>*</span>授权起止时间</label>
                        <el-date-picker
                        v-model="addinfo.accreditStartTime"
                        disabled
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                    <div class="block" style="margin-top:20px;">
                        <label class="accreditEndTime"  style="color:#606266;width:120px;display:inline-block"><span>*</span>授权结束时间</label>
                        <el-date-picker
                        v-model="addinfo.accreditEndTime"
                        disabled
                        type="date"
                        placeholder="选择日期"
                        format="yyyy 年 MM 月 dd 日"
                        value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                    <div class="auth">
                        <label ><span>*</span>合作公司</label>
                        <el-input type="text" v-model="addinfo.companyName" disabled ></el-input>
                        <!-- <el-select v-model="addinfo.companyName" placeholder="请选择" disabled >
                            <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select> -->
                    </div>
                    <div class="auth">
                        <label ><span>*</span>渠道名称</label>
                        <el-select v-model="addinfo.channelName" placeholder="请选择" disabled>
                            <el-option
                            v-for="(item,index) in channelInfo"
                            :key="index"
                            :label="item.channelName"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="confirm">
                <el-button @click="confirm(addinfo.id)" type="success" size="medium">确定</el-button>
                <el-button @click="cancel" type="success" plain size="medium">取消</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import api from 'js/service'
import {localStorage} from "js/localStorage"
export default {
    inject:['reload'],
    data(){
        return{
            pickerOptions1: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
            }, 
            options: [{
                value: '一级授权',
                label: '一级授权'
            },
            {
                value: '二级授权',
                label: '二级授权' 
            }],
            //合作方式假数据
            cooperationMethods:[{
                value: '1',
                label: '直采直销'
            },{  
                 value: '2',
                label: '一件代发'
            }
            ],
            brandList:[],
            accreditLevel:'',
            accreditStartTime:'',
            accreditEndTime:'',
            companyId:'',
            brandName:'',
            brandCode:'',
            userId:'',
            channelInfo:[]
        }
    },
    props:{
        addinfo:{
            type:Object,
            default:{}
        }
    },
    filters:{
        getLevel(val){
           return val==1 ?'一级授权':'二级授权'
        }
    },
    created(){
        this.selectBrand()
        this.userId =  localStorage.get('userID')
        this.getchannelInfomation()
    },
    methods:{
        //点击确定按钮，掉接口
        confirm(id){
                let parmas={
                    brandCode:this.addinfo.brandCode,
                    userId:this.userId,
                    id:id
                }
                let success=data=>{
                    if(data.code=='OK'){
                        this.$message.success('保存成功')
                        this.reload()
                        this.$emit('closeDialog')
                    }else{
                        this.$message.error(data.msg)
                    }
                }
                api.brandListUpdate(parmas,success)
        },
        selectBrand(){
            let success=data=>{
                if(data.code=='OK'){
                    this.brandList=data.data
                }else{
                    this.$message.error(data.msg)
                }
            }
            api.getBrandDetail({},success)
        },
        cancel(){
            this.$emit('closeDialog')
        },
         //获取渠道名称
        getchannelInfomation(){
            let parmas={
                pageIndex:1,
                pageSize:10
            }
            let success=data=>{
                if(data.code=='OK'){
                    this.channelInfo=data.data
                } else{
                    this.$message.error(data.msg)
                }  
            }
            api.channelList(parmas,success)
        },
    }
}
</script>
<style scoped>
.brandINFo .el-date-editor.el-input, .el-date-editor.el-input__inner{
 width:300px;
}
.brandINFo .el-input{
    width:300px;
}
.brandINFo .el-select{
    width:300px;
}
</style>

<style lang="scss" scoped>
.brandINFo{
    width:550px;
    height:530px;
    .companynews{
        h2{
            height:45px;
            line-height: 45px;
            text-indent: 20px;
            font-size: 20px;
            width:100%;
        }
    }
    .info{
        margin-left:3%;
        height:auto;
        .authbrand{
            margin-right:10px;
            span{
                color:red;
            }
            .auth{
                margin-bottom: 6px;
                label{
                    width: 120px;
                    display: inline-block;
                    margin:23px 0 10px 0;
                    color:#606266;
                }
                .el-input{
                    height:38px;
                    width:300px;
                    font-size: 14px;
                    color:#606266;
                }
            }
        }
    }
    .confirm{
       width:100%;
       text-align: center;
       padding-top: 15px;
       .el-button{
           margin:0 20px;
       }
    }
}
</style>





